<script setup lang="ts">
import { onMounted, ref, onActivated, onDeactivated, reactive } from "vue";
import tetris from "@/components/tetrisPanel.vue"
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
import useAppStore from '@/pinia'
const app = useAppStore() // pinia实例

const data = reactive({
  mode: '',
  type: ''
})

import { particlesOptions, winOptions } from "@/utils/particlesOptions";
let Options = particlesOptions() as any // 初始配置

const particlesHasInit = ref(false)
let container = null as any // 容器实例
// container.reset(item) // 修改容器Options

const particlesLoaded = async (el) => {
  console.log("Particles 加载完成", el);
  particlesHasInit.value = true
  container = el
}

onMounted(async () => {

})

onActivated(() => {
  if (container) {
    container.refresh()
    particlesHasInit.value = true
  }
  let query = route.query
  data.mode = query.mode
  data.type = query.type || 'single'
})

onDeactivated(() => {
  if (container) {
    container.pause()
    container.stop()
  }
  particlesHasInit.value = false
})

</script>

<template>
<div class="pageGame" :style="{
  padding: data.type == 'solo' ? '10vmin 10vmin 0 10vmin' : 0,
  justifyContent: data.type == 'solo' ? 'space-evenly' : 'center'
}">
  <tetris />
  <vue-particles
    :class="{ show: particlesHasInit }"
    id="tsparticles"
    :options="Options"
    @particlesLoaded="particlesLoaded"
  />
</div>
</template>

<style lang="scss" scoped>
.pageGame {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  #tsparticles {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
  }
  .show {
    animation: show 1s ease-in-out forwards;
  }
  @keyframes show {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1
    }
  }
}
</style>
